<template>
  <div class="information flex flex-wrap">
    <div class="rows">
      <div class="left">
        <span class="num">{{ data.sweepStreetNum || 0 }}</span
        ><span class="txt">我的扫街数</span>
      </div>
      <div class="right">
        <img
          class="w-26px h-23px"
          src="@/assets/workbench/work/shaojie.png"
          alt=""
        />
      </div>
    </div>
    <div class="rows">
      <div class="left">
        <span class="num">{{ data.newBusinessOpportunityNum || 0 }} </span
        ><span class="txt">我的新增商机数</span>
      </div>
      <div class="right">
        <img
          class="w-34px h-34px"
          src="@/assets/workbench/work/shangji.png"
          alt=""
        />
      </div>
    </div>
    <div class="rows">
      <div class="left">
        <span class="num">{{ data.visitNum || 0 }} </span
        ><span class="txt">我的拜访数</span>
      </div>
      <div class="right">
        <img
          class="w-34px h-34px"
          src="@/assets/workbench/work/baifang.png"
          alt=""
        />
      </div>
    </div>
    <div class="rows">
      <div class="left">
        <span class="num">{{ data.newSettledNum || 0 }} </span
        ><span class="txt">我的新增入驻数</span>
      </div>
      <div class="right">
        <img
          class="w-34px h-34px"
          src="@/assets/workbench/work/ruzhu.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}

.information {
  width: 100%;
  height: 163px;
  background: #ffffff;
  .rows {
    width: 47.3%;
    padding: 8px 0px 8px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      flex-direction: column;
      .num {
        font-size: 20px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #333333;
      }
      .txt {
        @include minxi-fontstyle(12px, 400, #666);
        margin-top: 3px;
      }
    }
    .right {
      padding-right: 21px;
    }
  }
  .rows:first-child {
    border-right: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    margin: 10px 0 0 10px;
    .right {
      padding-right: 25px;
    }
  }
  .rows:nth-child(2) {
    border-bottom: 1px solid #f6f6f6;
    margin: 10px 10px 0 0;
  }
  .rows:nth-child(3) {
    border-right: 1px solid #f6f6f6;
    margin: 0 0 10px 10px;
  }
  .rows:nth-child(4) {
    margin-bottom: 10px;
  }
}
</style>
